<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <table border="1" cellspacing="0" cellpadding="30">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="checkedAll" @change="changeAllFn">全选
                    </th>
                    <th>id</th>
                    <th>
                        商品名称
                    </th>
                    <th>图片</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="item in shopCar">
                    <td>
                        <input type="checkbox" v-model="item.checked" @Change="sigleCheckFn(item)">
                    </td>
                    <td>{{item.id}}</td>
                    <td>{{item.proname}}</td>
                    <td>
                        <img :src="item.img" alt="" :style="{width:'100px'}">
                    </td>
                    <td>
                        <button @click="item.num--">-</button>
                        <span>{{item.num}}</span>
                        <button @click="item.num++">+</button>
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        {{item.num*item.price}} 元
                    </td>
                    <td>
                        <button @click="delFn(item)">删除</button>
                    </td>
                </tr>
            </tbody>
            <div>
                总价:{{totalPriceFn()}} 元
            </div>

        </table>
    </div>
</body>

</html>
<script>
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                message1: 'Hello',
                checkedArr: [], // 存放所有的选中的数据
                checkedAll: false,// 全选的状态
                shopCar: [ // 购物车数组
                    {
                        id: 1,
                        proname: '显卡',
                        img: 'https://img1.baidu.com/it/u=818848496,66458574&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=356',
                        num: 1,
                        price: 5000,
                        checked: false,

                    },
                    {
                        id: 2,
                        proname: '内存条',
                        img: 'https://img0.baidu.com/it/u=1803126886,1505598917&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=394',
                        num: 1,
                        price: 100,
                        checked: false,
                    },
                    {
                        id: 3,
                        proname: 'cpu',
                        img: 'https://img2.baidu.com/it/u=2217923145,1289012453&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
                        num: 1,
                        price: 3000,
                        checked: false,
                    },
                    {
                        id: 4,
                        proname: '键盘',
                        img: 'https://img1.baidu.com/it/u=1494032087,1622722196&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
                        num: 1,
                        price: 500,
                        checked: false,
                    }
                ]
            }
        },
        methods: {
            // 全选
            changeAllFn() {
                //
                this.shopCar.forEach(item => {
                    item.checked = this.checkedAll
                })

            },
            // 单选
            sigleCheckFn(item) {
                // 根据单选的状态来判断全选的状态
                // let length = 0;
                // this.shopCar.forEach(item => {
                //     if (item.checked) {
                //         length++
                //     }
                // })

                // if (length == this.shopCar.length) {
                //     this.checkedAll = true
                // } else {
                //     this.checkedAll = false
                // }
                //语法: let boolean =  arr.every((item)=>{return 条件})
                this.checkedAll = this.shopCar.length > 0 ? this.shopCar.every(item => item.checked) : false
                // console.log('falg', flag);

            },
            // 总价
            totalPriceFn() {
                // sum 就是最后return 返回的值,也就是prev 累加的值
                let sum = this.shopCar.reduce((prev, item) => {
                    if (item.checked) {
                        // total += prev + item.price * item.num
                        prev += item.price * item.num
                    }
                    // 只能写值, 不能加条件
                    return prev
                }, 0)
                //  console.log('sum', sum);
                return sum
            },
            // 删除
            delFn(item) {
                this.shopCar.forEach((v, i) => {
                    if (v.id == item.id) {
                        this.shopCar.splice(i, 1)
                    }
                })
                // 删除后重新判断全选的状态
                this.sigleCheckFn()
            }

        }
    }).mount('#app')


    // var arr = [1, 2, 3, 4];
    // var sum = arr.reduce(function (prev, cur, index, arr) {
    //     console.log(prev, cur, index); // 0 1 0
    //     return prev + cur;
    // }, 0) //注意这里设置了初始值
    // console.log(arr, sum);
</script>